<template>
  <div>
    <div class="basic_line" style="height: 50px">基本信息</div>
    <!--disabled不可修改-->
    <v-basic-config :disabled="false" :configId="configId" :basicConfig="basicConfig"></v-basic-config>
    <div class="basic_line" style="height: 50px">参数配置</div>
    <h4 style="color: red ;text-align: center ;height: 50px"  v-show="state===1">请认真核实下方配置内容是否正确，可在线编辑文本内容</h4>
    <v-excel-show :data-source="basicConfig.content" ref="previewConfig" :disabled="disabled"  :configId="configId" :contents="basicConfig.content" :fileUrl="basicConfig.fileUrl"></v-excel-show>
    <div class="button_verify">
      <el-button  type="primary" v-show="state===1"  @click="verify">确认</el-button>
      <el-button  type="primary" v-show="state===2"  @click="release">发布</el-button>
      <el-button  type="primary" @click="back">返回</el-button>
    </div>
    <v-pop-window ref="verifyDialog" @userBehavior="doVerify"></v-pop-window>
    <v-pop-window ref="releaseDialog" @userBehavior="doRelease"></v-pop-window>
  </div>
</template>

<script>
import VExcelShow from '@/views/config/previewConfigFile.vue'
import VBasicConfig from '@/views/config/basicConfig.vue'
import VPopWindow from '@/views/config/popWindows.vue'
import { updateConfigContent, releaseConfig } from '@/api/config/config'
export default {

  props: {
    state: '',
    configId: '',
    disabled: '',
    basicConfig: {
      type: Object,
      default: () => {}
    }
  },
  name: 'ConfigConfirm',
  components: {
    VExcelShow,
    VBasicConfig,
    VPopWindow
  },
  data () {
    return {
      updateConfigContentParams: {
        version: '',
        content: '',
        fileUrl: ''
      }

    }
  },
  methods: {
    verify () {
      // 提示框
      this.$refs.verifyDialog.show('确认修改完成?', {
        type: 'confirm',
        confirmText: '确认',
        cancelText: '取消',
        titleText: '',
        data: null
      })
    },
    doVerify (type, data) {
      if (type === 'clickConfirm') {
        // 获取数据
        let configData = this.$refs.previewConfig.gatherData()
        this.updateConfigContentParams.version = this.basicConfig.version
        this.updateConfigContentParams.content = configData
        this.updateConfigContentParams.fileUrl = this.basicConfig.fileUrl
        updateConfigContent(this.updateConfigContentParams).then((res) => {
          if (res.code === 0) {
            this.$emit('changeConfigStatus', this.basicConfig.version, 2)
          } else {
            this.$notify.error('提交错误，请重试')
          }
        })
      }
    },
    release () {
      // 提示框
      this.$refs.releaseDialog.show('确认发布?', {
        type: 'confirm',
        confirmText: '确认',
        cancelText: '取消',
        titleText: '',
        data: null
      })
    },
    doRelease (type, data) {
      if (type === 'clickConfirm') {
        releaseConfig(this.basicConfig.version).then((res) => {
          if (res.code === 0) {
            this.$emit('closeConfirmConfig')
          }
        })
      }
    },
    back () {
      this.$emit('closeConfirmConfig')
    },
    message () {
      if (this.state === 2) {
        this.disabled = true
      } else if (this.state === 1) {
        this.disabled = false
      }
    }
  },
  created: function () {
    console.log(this, 'props')
    this.message()
  }
}
</script>

<style scoped>
.basic_line {
  font: 400 20px Helvetica, Arial, sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
}

/*CSS伪类用法*/
.basic_line:after, div:before {
  background: #000000;
  content: "";
  height: 2px;
  width: 45%;
}
.button_verify{
  text-align: center;
  margin-top:  auto;
}
</style>
